@use '@angular/material' as mat;

@mixin ngm-story__filter-bar($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $drawer-side-border: solid 1px mat.get-color-from-palette($foreground, divider);

  /**
    * for story filter bar
    */
  .ngm-story__filter-bar {
    &.mat-drawer-side {
      border-right: unset;
    }
    .ngm-story__filter-bar-header {
      border-bottom: $drawer-side-border;
    }

    .ngm-smart-filter-bar {
      flex: 1;
      max-height: calc(100% - 41px);
      font-size: 12px;

      &.ngm-direction--column {
        form {
          display: flex;
          max-height: 100%;

          .ngm-smart-filter-bar--content {
            flex-wrap: nowrap;
            overflow: auto;
            max-height: 100%;
          }
        }
      }
    }
  }
}

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);

  $grid-divider: 1px dashed map-get($foreground, divider);
}

@mixin density($config-or-theme) {
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
